<template>
    <div>
        <div class="mt item-box">
            <div class="item">
                <ul>
                  <template>
                    <li
											v-for="item in fristData" 
											:Key="item.id" 
											@click="renderSecond(item.id, item.name)" 
											:class="{on:fristId === item.id}">
											<span class="name">{{item.name}}</span>
											<span class="arrows" v-show="item.fristIcon"><Icon type="ios-arrow-forward" /></span>
										</li>
                  </template>
                </ul>
            </div>
            <div class="item">
                <ul>
                  <li
                    v-for="item in secondData" 
                    :Key="item.id"  
                    @click="renderthird(item.id, item.name)" 
                    :class="{on:secondId === item.id}"
                    v-show="item.level === 2 && fristId === item.pId">
                      <span class="name">{{item.name}}</span>
                      <span class="arrows" v-show="item.secondIcon"><Icon type="ios-arrow-forward" /></span>
                  </li>
                </ul>
            </div>
            <div class="item">
                <ul>
                  <li
                    v-for="item in thirdData" 
                    :Key="item.id" 
                    v-show="item.level === 3 && secondId === item.pId" 
                    @click="endIdChoose(item.id, item.name)" 
                    :class="{on:thirdId === item.id}">
                      {{item.name}}
                  </li>
                </ul>
            </div>
        </div>
        <p class="your-choose">您当前的选择是：
          {{fristName}}
          <span v-show="fristName && secondName" style="margin:0 5px;">></span>
          {{secondName}}
          <span v-show="fristName && secondName && thirdName" style="margin:0 5px;">></span>{{thirdName}}
        </p>
      <Loader :status="status" @refresh="getData"></Loader>
    </div>
</template>

<script>
export default {
  data() {
    return {
      id: null, //商品id
      endId: null, //最后一级类目的id
			fristId: null,
      secondId: null,
      thirdId: null,
      meunData: [],
      status: 'pass',
      fristData: [],
      secondData: [],
      thirdData: [],
      fristName: null,
      secondName: null,
      thirdName: null,
      isShowFirst: false
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    getInfo(id) {
      this.getData().then(() =>{
        this.$ajaxGet(`/product/product_info/f_${id}`).then(data =>{
          let level = 0;
          this.endId = data.productInfoDTO.categoryId
          let toSecond = {
            endId: this.endId
          };
          this.meunData.forEach(item =>{
            if (item.id === this.endId) {
              level = item.level;
              if (level === 3) {
                this.thirdId = item.id;
                toSecond.thirdName = item.name;
                this.secondId = item.pId;
                this.meunData.forEach(m =>{
                  if (m.id === this.secondId) {
                    toSecond.secondName = m.name;
                    this.fristId = m.pId;
                    this.meunData.forEach(j =>{
                      if(j.id === this.fristId) {
                        toSecond.fristName = j.name
                      }
                    })
                  }
                })
              } else if(level === 2) {
                toSecond.thirdName = null;
                toSecond.secondName = item.name;
                this.secondId = item.id;
                this.fristId = item.pId;
                this.meunData.forEach(m =>{
                  if (m.id === this.fristId) {
                    toSecond.fristName = m.name;
                  }
                })
              } else {
                this.fristId = item.id;
                toSecond.thirdName = null;
                toSecond.secondName = null;
                toSecond.fristName = item.name;
              }
            }
          });
          this.$emit("toSecond", toSecond);
        })
      })
    },
    async getData() {
      this.status = 'loading'
      let param = {
        isEnabled: true
      }
      await this.$ajaxGet('/product/common/supplier_tree', param).then(data => {
        this.status = 'pass'
        this.meunData = this.renderArr(data)
        this.fillData(1)
        this.fillData(2)
        this.fillData(3)
        this.fristData.forEach(m => {
          this.secondData.forEach(n => {
            if (m.id === n.pId) {
              m.fristIcon = true
            }
          })
        })
        this.secondData.forEach(m => {
          this.thirdData.forEach(n => {
            if (m.id === n.pId) {
              m.secondIcon = true
            }
          })
        })
      }).catch(()=>{
        this.status = 'error'
      })
    },
    renderArr(d){
      let arr = []
      let render = function (data) {
        data.forEach(item => {
          let target = {}
          target.name = item.categoryDTO.name
          target.id = item.categoryDTO.id
          target.pId = item.categoryDTO.parentId
          target.level = item.categoryDTO.treePath.split(',').length - 3
          target.productType = item.categoryDTO.productType
          arr.push(target)
          if (item.childCategoryList.length > 0) render(item.childCategoryList)
        })
      }
      render(d)
      return arr
    },
    fillData(level, pid) {
      this.meunData.forEach(item =>{
        if (item.level === level) {
          if (level === 1) this.fristData.push(item)
          if (level === 2) this.secondData.push(item)
          if (level === 3) this.thirdData.push(item)
        }
      })
    },
    renderSecond(id, name) {
      this.fristId = id
      this.fristName = name
      this.secondName = null
      this.thirdName = null
      this.secondId = null
      this.thirdId = null
      this.endId = null
      let flag = false
      flag = this.meunData.some(item => item.pId === id)  // 有下级
      if (flag) {
        this.secondData = this.getChildren(id)
      } else {
        this.endId = id
      }
      let toSecond = {
        fristName: this.fristName,
        secondName: this.secondName,
        thirdName: this.thirdName,
        endId: this.endId
      }
      this.$emit('toSecond', toSecond)
    },
    renderthird(id, name) {
      this.secondId = id
      this.secondName = name
      this.thirdName = null
      this.thirdId = null
      this.endId = null
      let flag = false
      flag = this.meunData.some(item => item.pId === id)  // 有下级
      if (flag) {
        this.thirdData = this.getChildren(id)
      } else {
        this.endId = id
      }
      let toSecond = {
        fristName: this.fristName,
        secondName: this.secondName,
        thirdName: this.thirdName,
        endId: this.endId
      }
      this.$emit('toSecond', toSecond)
    },
    endIdChoose(id, name) {
      this.thirdId = id
      this.thirdName = name
      this.endId = id
      let toSecond = {
        fristName: this.fristName,
        secondName: this.secondName,
        thirdName: this.thirdName,
        endId: this.endId
      }
      this.$emit('toSecond', toSecond)
    },
    getPerant(pid) {
      let result = null
      this.meunData.forEach(res => {
        if (res.id === pid) {
          result = res
        }
      })
      return result
    },
    getChildren(id) {
      let result = []
      this.meunData.forEach(res => {
        if (res.pId === id) {
          result.push(res)
        }
      })
      return result
    }
  }
}
</script>

